@import '../components/icon_picker';

.glyphs-picker-root {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.glyph-picker-root {
  &.minor {
    .glyph-picker-icon {
      width: $icon-size-md;
      height: $icon-size-md;
    }
  }

  .glyph-picker-icon {
    @include wowhead-background-icon;
    width: 3rem;
    height: 3rem;
    border: $border-default;
  }  
}

.glyph-modal {
  .selector-modal-list-item-link {
    flex: 1;
  }

  .selector-modal-list-item-name {
    flex: 2;
  }

  .selector-modal-list-item-description {
    margin-left: 1rem;
    letter-spacing: normal;
    color: $item-quality-junk;
    flex: 3;
  }
}

@include media-breakpoint-down(xl) {
  .glyphs-picker-root {
    width: 100%;
    flex-direction: row;

    .content-block {
      flex: 1;

      .content-block-body {
        flex-direction: row;
      }
    }
  }

  .glyph-picker-root {
    width: unset;

    &:not(:last-child) {
      margin-right: $block-spacer;
    }
  }
}